<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2023-04-28 16:42:59
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2025-09-29 15:22:42
 * @FilePath: \hl-registration-view\src\components\Common\RowItem.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <!-- 批量新增教师导入预览 -->
        <Model title="分配文章权限" :modelShow="props.filterVisible" width="56" @cancel="resetForm" @confirm="submitForm"
            :isActive="loadingIcon" :loadingIcon="loadingIcon" :confirmFont="loadingIcon ? '正在下载模板中，请耐心等待...' : '确 认'">
            <div class="tabBoxs">
                <el-form label-width="110px" size="default" label-position="right">
                    <div class="tips">请勾选您要分配的文章权限模块，可全选</div>
                    <div class="secbox">
                        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
                            @change="handleCheckAllChange">全选
                        </el-checkbox>
                        <!-- <el-input style="width:200px" v-model="searcgName" clearable placeholder="请输入关键字搜索"></el-input> -->
                    </div>
                    <div class="secbox">
                        <el-checkbox-group v-model="checkedItems" @change="handleCheckedCitiesChange">
                            <el-checkbox v-for="(item, index) in props.ExportCol" :label="item.uuid" :key="index">
                                <!-- 仅当文字超出 230px 时显示 Tooltip -->
                                <el-tooltip v-if="isTextOverflow(item.name)" :content="item.name" placement="top">
                                    <span class="ellipsis-text">{{ item.name }}</span>
                                </el-tooltip>
                                <!-- 文字未超出时直接显示 -->
                                <span v-if="!isTextOverflow(item.name)" class="ellipsis-text">{{ item.name }}</span>
                            </el-checkbox>
                        </el-checkbox-group>
                    </div>
                </el-form>
            </div>
        </Model>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { setModuleAuth } from '../Api/Operation'
interface PropsType {
    filterVisible?: boolean
    ExportCol?: any
    editUserId?: string
}
const props = withDefaults(defineProps<PropsType>(), {
    filterVisible: false,
    ExportCol: [],
    editUserId: ''
})
interface EmitType {
    (e: 'getList'): void
    (e: 'modelCancel', bol: boolean): void
}
const emit = defineEmits<EmitType>()
const resetForm = async () => {
    emit('modelCancel', false)
}
const loadingIcon = ref(false)
//  点击导出选中的字段模板
const submitForm = async () => {
    loadingIcon.value = true
    let arr: any = []
    props.ExportCol.forEach((item: any) => {
        if(checkedItems.value.includes(item.uuid)){
            arr.push({
                uuid: item.uuid, // 导出模板id
                status: 1 // 导出模板状态 1 选中 0 未选中
            })
        }else {
            arr.push({
                uuid: item.uuid, // 导出模板id
                status: 0 // 导出模板状态 1 选中 0 未选中
            })
        }
    })
    const params = {
        user_id: props.editUserId, // 导出模板id
        modules: arr // 导出字段id
    }
    const res: any = await setModuleAuth(params)
    if (res.code !== 1) {
        loadingIcon.value = false
        return ElMessage.error(res.message)
    }
    ElMessage.success(res.message)
    emit('getList')
    emit('modelCancel', false)
    loadingIcon.value = false
}
// 添加全选相关状态定义
const checkAll = ref(false) // 全选复选框选中状态
const isIndeterminate = ref(false) // 全选复选框不确定状态（半选）
const checkedItems = ref<any>([]) // 子复选框选中项
// 全选按钮点击事件处理
const handleCheckAllChange = (val: boolean) => {
    var arr: any = []
    props.ExportCol.forEach((item: any) => {
        arr.push(item.uuid)
    })
    checkedItems.value = val ? arr : []
    isIndeterminate.value = false
}
// 子复选框变化时更新全选状态
const handleCheckedCitiesChange = (value: any) => {
    const checkedCount = value.length
    checkAll.value = checkedCount === props.ExportCol.length // 所有子项选中时全选按钮选中
    isIndeterminate.value = checkedCount > 0 && checkedCount < props.ExportCol.length // 部分选中时显示半选状态
}
// 判断文本是否超出 230px
const isTextOverflow = (text: string) => {
    // 创建临时元素计算文本宽度（避免影响页面布局）
    const tempSpan = document.createElement('span');
    tempSpan.style.cssText = 'position: absolute; visibility: hidden; white-space: nowrap;';
    tempSpan.textContent = text;
    document.body.appendChild(tempSpan); // 添加到页面临时计算
    const textWidth = tempSpan.offsetWidth; // 获取文本实际宽度
    document.body.removeChild(tempSpan); // 移除临时元素
    return textWidth > 230; // 与容器最大宽度（230px）比较
}
watch(
  () => props.filterVisible,
  (newValue:any, oldValue:any) => {
    if(props.filterVisible){
        checkedItems.value = []
        props.ExportCol.forEach((item: any) => {
            if( Number(item.status)=== 1){
                checkedItems.value.push(item.uuid)
            }
        })
    }
  },
  { deep: true }
)
onMounted(() => {
})
</script>
<style lang="scss" scoped>
:deep(.el-alert) {
    width: 100%;
    margin-bottom: 20px;
    background: #F0F6FF;
    color: #3B94FE;

    .el-alert__title {
        font-size: 14px;
    }
}
:deep(.el-dialog) {
    width: 794px;
}
.tabBoxs {
    .tips {
        font-size: 14px;
        color: #333;
        margin-bottom: 20px;
    }

    .el-checkbox {
        width: 238px;
        height: 40px;
        background: #F5F6F7;
        border-radius: 3px;
        line-height: 40px;
        padding: 0 10px;
        box-sizing: border-box;
        display: inline-block;
        margin-bottom: 20px;
        margin-right: 20px;
    }
    .el-checkbox.el-checkbox:nth-of-type(3n+3){
        margin-right: 0;
    }
    .el-checkbox.is-checked {
        color: #B52427;
        background: #FFF1F1;
    }

    // 新增文字溢出样式
    .ellipsis-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        max-width: 230px; // 根据 checkbox 宽度（275px）减去内边距和可能的图标宽度计算
    }
}
</style>